<div id="layout">
    <h3>{% trans %}Edit Placeholder{% endtrans %}: {{ layout.placeholder_name }}</h3>
    <p>
        {% trans -%}Edit plugins inside this placeholder. By saving the individual plugin, the changes are saved as a draft, and only you are able to see the changes. To make your changes Public, Click the Publish Changes button.{%- endtrans %}
    </p>
    <div class="layout-rows">
        {% for row in layout.rows %}
            {% set y = loop.index0 %}
            {% set row_count = row.cells|count %}
            <div class="layout-row" data-y="{{ y }}">
                <div class="layout-row-cells">
                    {% for cell in row.cells -%}
                        {% set x = loop.index0 %}
                        <div class="layout-cell {% if (x, y) == current_cell_coords %}current{% endif %}" data-y="{{ y }}" data-x="{{ x }}">
                            {{- cell.plugin_name -}}
                        </div>
                    {%- endfor %}
                </div>
                <button class="layout-add-cell-btn"{% if row_count >= cell_limit %} disabled="disabled"{% endif %} data-y="{{ y }}" data-cell-count="{{ row_count }}" data-cell-limit="{{ cell_limit }}" title="{% trans %}Add new cell{% endtrans %}">
                    <i class="fa fa-plus-circle"></i>
                </button>
                <button class="layout-del-row-btn" data-y="{{ y }}" title="{% trans %}Delete row{% endtrans %}">
                    <i class="fa fa-minus-circle"></i>
                </button>
                <button class="layout-move-row-btn" title="{% trans %}Move row{% endtrans %}">
                    <i class="fa fa-arrows"></i>
                </button>
            </div>
        {% endfor %}
    </div>
    <button class="layout-add-row-btn">
        <i class="fa fa-plus"></i> {% trans %}Add new row{% endtrans %}
    </button>
</div>
